<template>
  <div class="orderlist">
    <van-tabs v-model="active" @click="change(active)">
      <van-tab title="全部">
        <div v-for="(item, index) in list" :key="index">
          <van-card
            :num="item.goodsList[0].number"
            :price="item.goodsList[0].price | Price"
            :desc="item.goodsList[0].specifications[0]"
            :title="item.goodsList[0].goodsName"
            :thumb="item.goodsList[0].picUrl"
          >
            <template #footer>
              <van-button
                size="mini"
                type="warning"
                v-if="item.orderStatusText == '未付款'"
                @click="onPay(item.id)"
                >立即支付</van-button
              >
              <van-button
                size="mini"
                v-if="
                  item.orderStatusText == '待付款' ||
                  item.orderStatusText == '未付款' ||
                  item.orderStatusText == '已付款'
                "
                @click="onCancel(item.id)"
                >取消订单</van-button
              >
              <van-button
                size="mini"
                v-if="item.orderStatusText == '待收货'"
                @click="onConfirm(item.id)"
                >确认收货</van-button
              >
              <van-button
                size="mini"
                v-if="
                  item.orderStatusText == '已取消(系统)' ||
                  item.orderStatusText == '已收货' ||
                  item.orderStatusText == '订单取消，退款中' ||
                  item.orderStatusText == '已发货' ||
                  item.orderStatusText == '已确认'
                "
                @click="onDel(item.id)"
                >删除订单</van-button
              >
            </template>
          </van-card>
        </div>
      </van-tab>
      <van-tab title="待付款"
        ><div v-for="(item, index) in list" :key="index">
          <van-card
            :num="item.goodsList[0].number"
            :price="item.goodsList[0].price | Price"
            :desc="item.goodsList[0].specifications[0]"
            :title="item.goodsList[0].goodsName"
            :thumb="item.goodsList[0].picUrl"
          >
            <template #footer>
              <van-button
                size="mini"
                type="warning"
                v-show="active == 1 ? true : false"
                @click="onPay(item.id)"
                >立即支付</van-button
              >
            </template>
          </van-card>
        </div></van-tab
      >
      <van-tab title="待发货"
        ><div v-for="(item, index) in list" :key="index">
          <van-card
            :num="item.goodsList[0].number"
            :price="item.goodsList[0].price | Price"
            :desc="item.goodsList[0].specifications[0]"
            :title="item.goodsList[0].goodsName"
            :thumb="item.goodsList[0].picUrl"
          >
            <template #footer>
              <van-button size="mini" @click="onCancel(item.id)"
                >取消订单</van-button
              >
            </template>
          </van-card>
        </div></van-tab
      >
      <van-tab title="待收货"
        ><div v-for="(item, index) in list" :key="index">
          <van-card
            :num="item.goodsList[0].number"
            :price="item.goodsList[0].price | Price"
            :desc="item.goodsList[0].specifications[0]"
            :title="item.goodsList[0].goodsName"
            :thumb="item.goodsList[0].picUrl"
          >
            <template #footer>
              <van-button size="mini" @click="onConfirm(item.id)"
                >确认收货</van-button
              >
            </template>
          </van-card>
        </div></van-tab
      >
      <van-tab title="待评价"
        ><div v-for="(item, index) in list" :key="index">
          <van-card
            :num="item.goodsList[0].number"
            :price="item.goodsList[0].price | Price"
            :desc="item.goodsList[0].specifications[0]"
            :title="item.goodsList[0].goodsName"
            :thumb="item.goodsList[0].picUrl"
          >
            <template #footer>
              <van-button size="mini" @click="toComment(item.goodsList[0].id)"
                >立即评价</van-button
              >
            </template>
          </van-card>
        </div></van-tab
      >
    </van-tabs>
  </div>
</template>

<script>
import { Tab, Tabs, Card, Button, Toast, Dialog } from "vant";
import API from "@/utils/api.js";
export default {
  name: "OrderList",
  data() {
    return {
      active: 0,
      list: [],
    };
  },
  filters: {
    str: (value) => {
      return value.slice(0, 4);
    },
    Price: (value) => {
      return value + ".00";
    },
  },
  created() {
    this.orderData();
  },
  methods: {
    orderData() {
      this.$get(API.GET_ORDER_LIST, {
        token: this.$store.state.token,
        showType: this.active,
      }).then((res) => {
        console.log(res);
        this.list = res.data.list;
      });
    },
    change(active) {
      console.log("点切换", active);
      this.active = active;
      this.orderData();
    },
    onPay(id) {
      this.$post(API.POST_ORDER_PAY, {
        token: this.$store.state.token,
        orderId: id,
      }).then((res) => {
        console.log(res);
        this.$get(API.GET_ORDER_DETAIL, {
          token: this.$store.state.token,
          orderId: id,
        }).then((res) => {
          console.log(res);
        });
        const toast = Toast.loading({
          duration: 0,
          forbidClick: true,
          message: "支付中...",
        });
        let second = 3;
        const timer = setInterval(() => {
          second--;
          if (second) {
            toast.message = "支付中...";
          } else {
            clearInterval(timer);
            this.orderData();
            Toast.clear();
            Toast.success("支付成功");
          }
        }, 1000);
      });
    },
    onCancel(id) {
      this.$post(API.POST_ORDER_REFUND, {
        token: this.$store.state.token,
        orderId: id,
      }).then((res) => {
        console.log(res);
        const toast = Toast.loading({
          duration: 0,
          forbidClick: true,
          message: "取消中...",
        });
        let second = 3;
        const timer = setInterval(() => {
          second--;
          if (second) {
            toast.message = "取消中...";
          } else {
            clearInterval(timer);
            this.orderData();
            Toast.clear();
            Toast.success("取消成功");
          }
        }, 1000);
      });
    },
    onConfirm(id) {
      Dialog.confirm({
        message: "确认已收到商品？",
      })
        .then(() => {
          this.$post(API.POST_ORDER_CONFIRM, {
            token: this.$store.state.token,
            orderId: id,
          }).then((res) => {
            console.log(res);
          });
          const toast = Toast.loading({
            duration: 0,
            forbidClick: true,
            message: "收货中...",
          });
          let second = 3;
          const timer = setInterval(() => {
            second--;
            if (second) {
              toast.message = "收货中...";
            } else {
              clearInterval(timer);
              this.orderData();
              Toast.clear();
              Toast.success("收货成功");
            }
          }, 1000);
        })
        .catch(() => {
          // on cancel
        });
    },
    onDel(id) {
      this.$post(API.POST_ORDER_DELETE, {
        token: this.$store.state.token,
        orderId: id,
      }).then((res) => {
        console.log(res);
        if (res.errno == 725) {
          Toast.fail("退款中，不能删除");
        } else {
          const toast = Toast.loading({
            duration: 0,
            forbidClick: true,
            message: "删除中...",
          });
          let second = 3;
          const timer = setInterval(() => {
            second--;
            if (second) {
              toast.message = "删除中...";
            } else {
              clearInterval(timer);
              Toast.clear();
              this.orderData();
              Toast.success("删除成功");
            }
          }, 1000);
        }
      });
    },
    toComment(id) {
      this.$router.push({
        path: "/comment",
        query: {
          id: id,
        },
      });
    },
  },
  components: {
    [Tab.name]: Tab,
    [Tabs.name]: Tabs,
    [Card.name]: Card,
    [Button.name]: Button,
    [Toast.name]: Toast,
    [Dialog.name]: Dialog,
  },
};
</script>

<style lang="less" scoped>
.orderlist {
  margin-top: 46px;
  color: #444;
  display: flex;
  flex-direction: column;
  .van-card__price {
    color: rgb(238, 74, 74);
  }
}
</style>